<template>
    <view class="view-infos">
        <view class="user-info-wrap">
            <image class="avatar" :src="sharedInfo.avatar || vuex_avatarUrl" mode=""></image>
            <view class="infos">
                <view class="nick-name">{{ sharedInfo.nickName || vuex_nickName }}</view>
                <view class="share-text">{{ userSignature }}</view>
            </view>
        </view>
        <view class="btns">
            <!-- 完成 -->
            <view class="flex u-p-l-40" @click="complete" v-if="role === 'preview'">
                <image src="../static/viewWorks/complete-icon.png" mode=""></image>
                <view class="u-p-l-15">完成</view>
            </view>
            <!-- 编辑 -->
            <view class="flex u-p-l-40" @click="edit" v-if="role === 'view'">
                <image src="../static/viewWorks/edit-icon.png" mode=""></image>
                <view class="u-p-l-15">编辑</view>
            </view>
            <!-- 点赞 -->
            <view class="flex u-p-l-40 toggleLike"  @click="toggleLike" v-if="role === 'shareView'">
                <image class="image" src="../static/viewWorks/like-icon.png" mode="" v-if="vuex_worksLikeStatus"></image>
                <image class="image" src="../static/viewWorks/noLike-icon.png" mode="" v-else></image>
                <view class="u-p-l-15">点赞</view>
            </view>
            <!-- 分享 -->
            <view class="flex u-p-l-40" @click="share">
                <image src="../static/viewWorks/share-icon.png" mode=""></image>
                <view class="u-p-l-15">分享</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {};
    },
    props: {
        worksId: {
            type: String,
            default: ''
        },
        role: {
            type: String,
            default: 'preview'
        },
        // 被分享者的信息
        sharedInfo: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    created() {},
    computed: {
        userSignature() {
            if (this.sharedInfo && this.sharedInfo.userSignature) {
                return this.sharedInfo.userSignature;
            } else {
                return this.vuex_userSignature || '世界那么大，一起去看看';
            }
        }
    },
    methods: {
        complete() {
            this.$emit('complete');
        },
        edit() {
            this.$emit('edit');
        },
        toggleLike() {
            this.$emit('toggleLike');
        },
        share() {
            this.$emit('share');
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.view-infos {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .user-info-wrap {
        display: flex;
        align-items: center;

        .avatar {
            width: 100rpx;
            height: 100rpx;
            background-color: #ffffff;
            border-radius: 100%;
            border: 4rpx solid #fff;
            box-sizing: border-box;
        }
        .infos {
            font-size: 26rpx;
            line-height: 26rpx;
            padding-left: 26rpx;
            .nick-name {
                font-size: 32rpx;
                line-height: 32rpx;
                padding-bottom: 20rpx;
            }
            .share-text {
                opacity: 0.8;
            }
        }
    }
    .btns {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
        display: flex;
        color: #ffffff;
        font-size: 28rpx;
        line-height: 28rpx;
        image {
            width: 32rpx;
            height: 32rpx;
        }
    }
    .toggleLike{
        .image{
            	width: 32rpx;
            	height: 28rpx;
        }
    }
}
</style>
